<template>
  <div class="c-pb120 c-bg-sgray">
    <div class="c-pl24 c-pr40 c-fs32" v-for="(item,index) in dataInfo" :key="index" :class="[isCopy == -1 ? 'closeBig copyNot' : '',hasShowMore && !showAllContent ? 'c-text-hidden':'']">
      <div class="c-pv20 c-flex-row c-aligni-center">
        <div class="groupName c-bg-xblue c-inlineblack"></div>
        <p class="c-fs30 c-fc-xblue c-inlineblack c-pl4 c-w80 c-text-ellipsis1 c-pl10">{{item.groupName}}</p>
      </div>
      <div v-if="item.imageUrl && item.imageUrl != '' && item.imageUrl != null" class="c-w100 c-pt10 c-pb20">
        <img :src="$addXossFilter(item.imageUrl)" alt>
      </div>
      <div v-for="(item,index) in item.words " :key="index">
        <p class="c-fw-b c-lh-20">
          <span>{{item.word}}</span>
          <span class="c-pl32">{{item.pronunciation}}</span>
          <span class="c-pl32">{{item.paraphrase}}</span>
        </p>
        <p v-if="item.desc" class="c-lh-20" v-html="item.desc"></p>
      </div>
    </div>

    <pagination :page="page" :pageInput="pageInput" @changepage="changepage" :totalPage="totalPage" v-show="showPagination && totalPage > 1"></pagination>
    <my-loading :showLoading="isLoading"></my-loading>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common";
import pagination from "@/components/templates/common/pagination.vue";
import myLoading from "@/plugin/loading/loading.vue";
export default {
  name: "wordQuery",
  components: {
    pagination,
    myLoading
  },
  data() {
    return {
      limit: 10,
      searchType: 1,
      search: "",
      page: 1,
      dgId: "",
      dId: "",
      type: 0,
      isLoading: false,
      dataInfo: "",
      allPage: "",
      isCopy: '',
      pageInput: 1,
      totalPage: 1,
      hasShowMore: false,
      showPagination: false,
      showAllContent: false
    };
  },
  methods: {
    getWordMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(
          global.apiurl +
          "dictionary/getWords/" +
          this.dId +
          "?dgId=" +
          this.dgId +
          "&search=" +
          this.search +
          "&searchType=" +
          this.searchType +
          "&page=" +
          this.page +
          "&limit=" +
          this.limit,
          (res) => {
            window.scrollTo(0, 0);
            this.dataInfo = res.data.data;
            this.totalPage = res.data.totalPage;
            this.isLoading = false;
            this.isCopy = res.dictionary.isCopy;
            this.$nextTick(() => {
              this.showPagination = this.checkScrollBottom();
            });
          }
        );
      }
    },
    windowScrollFunction() {
      this.showPagination = this.checkScrollBottom();
    },
    checkScrollBottom() {
      let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
      let clientHeight = document.body.clientHeight && document.documentElement.clientHeight ? Math.min(document.body.clientHeight, document.documentElement.clientHeight) : Math.max(document.body.clientHeight, document.documentElement.clientHeight);
      let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
      if (scrollTop + clientHeight >= (scrollHeight - 20)) {
        return true;
      } else {
        return false;
      }
    },
    //分享
    wechatShare: function () {
      let shareData = JSON.parse(localStorage.getItem("wordShareInfo"));
      utilJs.wechatConfig(
        shareData.shareUrl,
        shareData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare: function () {
      let shareData = JSON.parse(localStorage.getItem("wordShareInfo"));
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    },
    changepage(page) {
      this.page = page;
      this.getWordMore();
    }
  },
  activated() {
    setDocumentTitle("词典详情"); // eslint-disable-line
    this.page = 1;
    this.dId = this.$route.query.dId;
    this.dgId = this.$route.query.dgId;
    this.getWordMore();
    this.showAllContent = false;
    this.hasShowMore = false;
    this.wechatShare();
    window.scrollTo(0, 0);
    window.addEventListener("scroll", this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener("scroll", this.windowScrollFunction);
  },
  created() {
    utilJs.appShare(this);
  }
};
</script>

<style scoped>
.groupName {
  width: 3px;
  height: 15px;
}
</style>
